var tab_msg = document.querySelector(".tab-msg");
var tab_client = document.querySelector(".tab-client");
var section_client_msg= document.querySelector(".section-client-msg");
var section_all_client = document.querySelector(".section-all-client");
tab_msg.addEventListener("click",function(){
    console.log("ddd");
    tab_msg.classList.toggle("tab-active",true);
    tab_client.classList.toggle("tab-active",false);
    section_client_msg.style.display = "block";
    section_all_client.style.display = "none";
})

tab_client.addEventListener("click",function(){
    tab_msg.classList.toggle("tab-active",false);
    tab_client.classList.toggle("tab-active",true);
    section_client_msg.style.display = "none";
    section_all_client.style.display = "block";
})

var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange",function(e){
    if(xhr.readyState == 4 && e.target.status == 200){
        var data_json = JSON.parse(e.target.response);
        console.log("数据",data_json.all_client_data);

        // 获取DOM
        var section = document.querySelector(".section-all-client");
        
        var template = function(touxiang,phone_num,consume,wait){
            return ` <div class="touxiang">
            <img src="${touxiang}" alt="" srcset="" class="touxiang-img">
        </div>
        <div class="detail">
            <div class="cname">
                ${phone_num}
            </div>
            <div class="daifahuo">
                <span>${wait}</span>笔待发货
            </div>
            <p>累计消费：￥${consume}</p>
        </div>`
        }
        data_json.all_client_data.forEach((el,index) => {
            var client_item = document.createElement("div");
            client_item.classList.add("client-item");
            client_item.innerHTML=template(el.touxiang,el.phone_num,el.consume,el.wait);
            section.appendChild(client_item);
        });
    }
})
xhr.open("GET","https://www.easy-mock.com/mock/5bab79173567340cc7d3dc8c/YouBeiShop/getAllClient");
xhr.send();

var client_item = document.querySelector(".client-item");

client_item.addEventListener("click",function(){
    location.href="chat.html";
})

var back_btn = document.querySelector(".back-btn");

back_btn.addEventListener("click",function(){
    history.go(-1);
})


